<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport" />
    <meta content="telephone=no" name="format-detection" />
    <title>Step2：查看结果</title>

    <link rel="stylesheet" href="../css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="../css/demo.css" />
    <link rel="stylesheet" type="text/css" href="../css/dialog.css" />
    <!-- individual effect -->
    <link rel="stylesheet" type="text/css" href="../css/dialog-jim.css" />

    <script src="../js/snap.svg-min.js"></script>
    <script src="../js/modernizr.custom.js"></script>


    <style>
        html, body {
            height: 100%;
        }
        .topArea{
            width: 100%;
            height: 280px;
        }
        .bottomArea{
            width: 100%;
            height: 90px;
            border-top:1px solid #e6dede;
            text-align: left;
        }

        .bottomArea .leftArea{
            width: 140px;
            display: inline-block;
            height: 90px;
            line-height: 90px;
            vertical-align: top;
        }

        .bottomArea .rightArea{
            width: 80px;
            display: inline-block;
            height: 90px;
            vertical-align: top;
            margin-top: 8px;
        }
    </style>

    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?76ea15b55b1b6fbfd65463d26d7c662d";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
</head>
<body>

    <link rel="stylesheet" type="text/css" href="../css/common.css">

    <canvas id="cas"></canvas>

    <div class="swiper-container" style="width: 100%;height: 100%;">
        <div class="swiper-wrapper">

            <div class="swiper-slide" style="width: 100%;position: relative;">
                <!--<div class="titleBox" style="margin-top: 10px;margin-bottom: 10px;"><img src="../images/save.png" style="width: 200px;"></div>-->

                <div id="result1" class="main-box main-box-result" style="overflow: hidden; width: 300px;height: 480px;box-shadow: 0px 3px 20px #cac7c7;">

                </div>
            </div>

            <div class="swiper-slide" style="width: 100%;position: relative;">
                <div class="main-box main-box-result" id="result2">
                </div>
            </div>

            <!--<div class="swiper-slide" style="width: 100%;position: relative;">-->
                <!--<div class="main-box main-box-result">-->
                    <!--<img src="../images/result8.png" style="width: 100%; height: 100%;">-->
                <!--</div>-->
            <!--</div>-->
        </div>

        <div class="swiper-button-prev swiper-button-black" style="top: 10px;transform: translateX(-50%) rotate(90deg);"></div>
        <div class="swiper-button-next swiper-button-black" style="bottom:0;transform: translateX(-50%) rotate(90deg);"></div>
    </div>

    <div class="button-wrap" style="display: none;"><button data-dialog="somedialog" class="trigger">Open Dialog</button></div>
    <div id="somedialog" class="dialog">
        <div class="dialog__overlay"></div>
        <div class="dialog__content">
            <div class="morph-shape" data-morph-open="M199.5,100c0,54.955-44.768,99.5-100,99.5s-100-44.545-100-99.5c0-54.956,44.769-99.5,100-99.5
	S199.5,45.044,199.5,100z">
                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
                    <path d="M199.5,100c0,0.552-44.768,1-100,1s-100-0.448-100-1s44.769-1,100-1S199.5,99.448,199.5,100z"></path>
                </svg>
            </div>
            <div class="dialog-inner">
                <h2>长按图片可保存分享</h2><div><button class="action" data-dialog-close style="border-radius: 10px;background: #007aff;">朕知道了</button></div>
            </div>
        </div>
    </div>


    <script type="text/javascript" src="../js/canvas.js"></script>
    <!--<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>-->
    <script src="../js/swiper.min.js"></script>
    <script src="../js/classie.js"></script>
    <script src="../js/dialogFx.js"></script>

    <script>
        window.onload = function(){

            var resultUrl = localStorage.getItem("resultUrl");
            if (resultUrl==null || resultUrl=="") {
                window.location.href = "index.html";
            }

            document.getElementById("result1").innerHTML = "<img src=\""+resultUrl.split(",")[0]+"\" style=\"width: 100%; height: 100%;\">";
            document.getElementById("result2").innerHTML = "<img src=\""+resultUrl.split(",")[1]+"\" style=\"width: 100%; height: 100%;\">";

            var mySwiper = new Swiper('.swiper-container', {
                direction: 'vertical',
                // 如果需要前进后退按钮
                nextButton: '.swiper-button-next',
                prevButton: '.swiper-button-prev',
            });

            var dlgtrigger = document.querySelector( '[data-dialog]' ),

                somedialog = document.getElementById( dlgtrigger.getAttribute( 'data-dialog' ) ),
                // svg..
                morphEl = somedialog.querySelector( '.morph-shape' ),
                s = Snap( morphEl.querySelector( 'svg' ) ),
                path = s.select( 'path' ),
                initialPath = path.attr('d'),
                steps = {
                    open : morphEl.getAttribute( 'data-morph-open' )
                },
                dlg = new DialogFx( somedialog, {
                    onOpenDialog : function( instance ) {
                        // reset path
                        morphEl.querySelector( 'svg > path' ).setAttribute( 'd', initialPath );
                        // animate path
                        path.stop().animate( { 'path' : steps.open }, 300, mina.easein );
                    }
                } );

            dlgtrigger.addEventListener( 'click', dlg.toggle.bind(dlg) );
            dlgtrigger.click();
        };
    </script>

</body>
</html>
